<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部运力对接</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">外部运力对接</div>
            
            <!-- 合作伙伴概览 -->
            <div class="partner-overview">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card class="overview-card total">
                            <div class="overview-item">
                                <div class="overview-number">{{ partnerStats.total }}</div>
                                <div class="overview-label">合作车队</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card active">
                            <div class="overview-item">
                                <div class="overview-number">{{ partnerStats.active }}</div>
                                <div class="overview-label">活跃车队</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card vehicles">
                            <div class="overview-item">
                                <div class="overview-number">{{ partnerStats.vehicles }}</div>
                                <div class="overview-label">外部车辆</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card class="overview-card revenue">
                            <div class="overview-item">
                                <div class="overview-number">{{ partnerStats.revenue }}</div>
                                <div class="overview-label">月度合作额(万)</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 功能选项卡 -->
            <el-tabs v-model="activeTab">
                <el-tab-pane label="车队入驻" name="registration">
                    <div class="query-section">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input v-model="registrationQuery.companyName" placeholder="车队名称" clearable></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-select v-model="registrationQuery.status" placeholder="申请状态" clearable>
                                    <el-option label="待审核" value="pending"></el-option>
                                    <el-option label="已通过" value="approved"></el-option>
                                    <el-option label="已拒绝" value="rejected"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="searchRegistrations">查询</el-button>
                                <el-button @click="resetRegistrationQuery">重置</el-button>
                                <el-button type="success" @click="invitePartner">邀请入驻</el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <el-table :data="registrationData" border style="width: 100%">
                        <el-table-column prop="companyName" label="车队名称" width="150"></el-table-column>
                        <el-table-column prop="contactPerson" label="联系人" width="120"></el-table-column>
                        <el-table-column prop="phone" label="联系电话" width="130"></el-table-column>
                        <el-table-column prop="vehicleCount" label="车辆数量" width="100"></el-table-column>
                        <el-table-column prop="businessScope" label="业务范围" width="200"></el-table-column>
                        <el-table-column prop="status" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="getStatusType(scope.row.status)">
                                    {{ getStatusText(scope.row.status) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewDetail(scope.row)">详情</el-button>
                                <el-button size="mini" type="success" @click="approve(scope.row)" v-if="scope.row.status === 'pending'">通过</el-button>
                                <el-button size="mini" type="danger" @click="reject(scope.row)" v-if="scope.row.status === 'pending'">拒绝</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="合作管理" name="cooperation">
                    <div class="query-section">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-input v-model="partnerQuery.companyName" placeholder="车队名称" clearable></el-input>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="partnerQuery.level" placeholder="合作等级" clearable>
                                    <el-option label="战略合作伙伴" value="strategic"></el-option>
                                    <el-option label="核心合作伙伴" value="core"></el-option>
                                    <el-option label="普通合作伙伴" value="normal"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" @click="searchPartners">查询</el-button>
                                <el-button @click="resetPartnerQuery">重置</el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <el-table :data="partnerData" border style="width: 100%">
                        <el-table-column prop="companyName" label="车队名称" width="150"></el-table-column>
                        <el-table-column prop="level" label="合作等级" width="120">
                            <template slot-scope="scope">
                                <el-tag :type="getLevelType(scope.row.level)">
                                    {{ getLevelText(scope.row.level) }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="vehicleCount" label="车辆数量" width="100"></el-table-column>
                        <el-table-column prop="monthlyOrders" label="月订单量" width="100"></el-table-column>
                        <el-table-column prop="satisfactionRate" label="满意度" width="100">
                            <template slot-scope="scope">
                                <span style="color: #67C23A">{{ scope.row.satisfactionRate }}%</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="monthlyRevenue" label="月合作额(万)" width="120"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewPartnerDetail(scope.row)">详情</el-button>
                                <el-button size="mini" type="primary" @click="editPartner(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="运力调度" name="dispatch">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-card header="运力需求">
                                <el-table :data="demandData" border style="width: 100%">
                                    <el-table-column prop="orderNo" label="订单号" width="120"></el-table-column>
                                    <el-table-column prop="route" label="运输路线" width="200"></el-table-column>
                                    <el-table-column prop="weight" label="重量(吨)" width="100"></el-table-column>
                                    <el-table-column prop="budget" label="预算(元)" width="100"></el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="matchCapacity(scope.row)">匹配运力</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card header="可用运力">
                                <div v-for="capacity in availableCapacity" :key="capacity.id" class="capacity-item">
                                    <div class="capacity-info">
                                        <span class="company-name">{{ capacity.companyName }}</span>
                                        <el-tag size="mini">{{ capacity.availableVehicles }}辆可用</el-tag>
                                    </div>
                                    <p>{{ capacity.location }} | {{ capacity.priceRange }}</p>
                                    <el-button size="mini" type="primary" @click="requestCapacity(capacity)">预约</el-button>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    activeTab: 'registration',
                    partnerStats: {
                        total: 18,
                        active: 15,
                        vehicles: 125,
                        revenue: 86.5
                    },
                    registrationQuery: {
                        companyName: '',
                        status: ''
                    },
                    partnerQuery: {
                        companyName: '',
                        level: ''
                    },
                    registrationData: [
                        {
                            id: 1,
                            companyName: '衡阳健康冷链运输有限公司',
                            contactPerson: '李经理',
                            phone: '13807345001',
                            vehicleCount: 12,
                            businessScope: '湘莲、黄花菜冷链运输',
                            status: 'pending'
                        },
                        {
                            id: 2,
                            companyName: '衡阳湘南物流有限公司',
                            contactPerson: '刘总',
                            phone: '13907348888',
                            vehicleCount: 8,
                            businessScope: '茶油、土特产冷链配送',
                            status: 'approved'
                        }
                    ],
                    partnerData: [
                        {
                            id: 1,
                            companyName: '衡阳湘南物流',
                            level: 'strategic',
                            vehicleCount: 32,
                            monthlyOrders: 128,
                            satisfactionRate: 98,
                            monthlyRevenue: 28.6
                        },
                        {
                            id: 2,
                            companyName: '衡阳健康冷链',
                            level: 'core',
                            vehicleCount: 18,
                            monthlyOrders: 86,
                            satisfactionRate: 96,
                            monthlyRevenue: 18.5
                        },
                        {
                            id: 3,
                            companyName: '祁东黄花菜物流',
                            level: 'normal',
                            vehicleCount: 12,
                            monthlyOrders: 58,
                            satisfactionRate: 94,
                            monthlyRevenue: 12.8
                        }
                    ],
                    demandData: [
                        {
                            orderNo: 'HY001',
                            route: '衡阳蒸湘区→长沙',
                            weight: 8,
                            budget: 1200
                        },
                        {
                            orderNo: 'HY002',
                            route: '衡阳祁东→衡阳市区',
                            weight: 5,
                            budget: 450
                        }
                    ],
                    availableCapacity: [
                        {
                            id: 1,
                            companyName: '衡阳湘南物流',
                            availableVehicles: 8,
                            location: '衡阳市区',
                            priceRange: '0.6-0.9元/公里'
                        },
                        {
                            id: 2,
                            companyName: '衡阳健康冷链',
                            availableVehicles: 5,
                            location: '衡阳蒸湘区',
                            priceRange: '0.7-1.0元/公里'
                        }
                    ]
                }
            },
            methods: {
                getStatusType(status) {
                    const typeMap = {
                        'pending': 'warning',
                        'approved': 'success',
                        'rejected': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                getStatusText(status) {
                    const textMap = {
                        'pending': '待审核',
                        'approved': '已通过',
                        'rejected': '已拒绝'
                    };
                    return textMap[status] || '未知';
                },
                getLevelType(level) {
                    const typeMap = {
                        'strategic': 'danger',
                        'core': 'warning',
                        'normal': 'info'
                    };
                    return typeMap[level] || 'info';
                },
                getLevelText(level) {
                    const textMap = {
                        'strategic': '战略',
                        'core': '核心',
                        'normal': '普通'
                    };
                    return textMap[level] || '未知';
                },
                searchRegistrations() {
                    this.$message.success('查询完成');
                },
                resetRegistrationQuery() {
                    this.registrationQuery = { companyName: '', status: '' };
                },
                invitePartner() {
                    this.$message.info('邀请入驻功能开发中');
                },
                viewDetail(row) {
                    this.$message.info('查看详情功能开发中');
                },
                approve(row) {
                    this.$confirm('确认通过申请？', '审核确认').then(() => {
                        row.status = 'approved';
                        this.$message.success('审核通过');
                    });
                },
                reject(row) {
                    this.$confirm('确认拒绝申请？', '审核确认').then(() => {
                        row.status = 'rejected';
                        this.$message.success('审核拒绝');
                    });
                },
                searchPartners() {
                    this.$message.success('查询完成');
                },
                resetPartnerQuery() {
                    this.partnerQuery = { companyName: '', level: '' };
                },
                viewPartnerDetail(row) {
                    this.$message.info('查看详情功能开发中');
                },
                editPartner(row) {
                    this.$message.info('编辑合作伙伴功能开发中');
                },
                matchCapacity(row) {
                    this.$message.info('匹配运力功能开发中');
                },
                requestCapacity(capacity) {
                    this.$message.success('已发送预约请求');
                }
            }
        });
    </script>

    <style scoped>
        .partner-overview {
            margin-bottom: 30px;
        }
        
        .overview-card {
            text-align: center;
            transition: all 0.3s;
        }
        
        .overview-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .overview-card.total {
            border-left: 4px solid #409EFF;
        }
        
        .overview-card.active {
            border-left: 4px solid #67C23A;
        }
        
        .overview-card.vehicles {
            border-left: 4px solid #E6A23C;
        }
        
        .overview-card.revenue {
            border-left: 4px solid #F56C6C;
        }
        
        .overview-number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
        }
        
        .overview-label {
            color: #606266;
            margin: 8px 0;
        }
        
        .query-section {
            background: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .capacity-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        
        .capacity-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .company-name {
            font-weight: bold;
            color: #409EFF;
        }
    </style>
</body>
</html>